<template>
  <div class="page-box">
    <!-- -----------------------------------主页面----------------------------------- -->
    <div v-if="keyNum===1" class="main">
      <!-- 工具条区域 -->
      <div class="tabbar">
        <el-row type="flex" justify="end">
          <div>
            <el-button plain type="primary" size="mini" @click="changePage(2)">创建试卷</el-button>
          </div>
        </el-row>
      </div>

      <!-- 筛选区域 -->
      <div class="search">
        <el-form size="small" :inline="true">

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试卷名称">
                <el-input v-model.trim="paramsData.paper_name" placeholder="请输入试卷名称" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="归属学科">
                <el-select v-model="paramsData.subject_id" clearable placeholder="请选择" @change="changeId">

                  <el-option
                    v-for="item in selectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item label="归属目录">

                <el-select v-model="paramsData.directory_id" clearable placeholder="请选择">
                  <el-option
                    v-for="item in directoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

              </el-form-item>

            </el-col>
            <el-col :span="6">
              <el-form-item label="试卷状态">
                <el-select v-model="paramsData.show_state" clearable placeholder="请选择">
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试卷难度">
                <el-select v-model="paramsData.difficulty" clearable placeholder="请选择">
                  <el-option label="简单" :value="1" />
                  <el-option label="中等" :value="2" />
                  <el-option label="较难" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试卷类型">
                <el-select v-model="paramsData.paper_type" clearable placeholder="请选择">
                  <el-option label="模拟卷" :value="1" />
                  <el-option label="真题卷" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="paramsData.create_time"
                  style="width:180px"
                  type="daterange"
                  value-format="timestamp"
                  range-separator="至"
                  start-placeholder="开始"
                  end-placeholder="结束"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人">
                <el-input v-model.trim="form.create_name" placeholder="请输入创建人" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20" type="flex" justify="end">
            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>

      <!-- 表格区域 -->
      <div class="tabel">
        <el-table
          :data="list"
          border
          style="width: 100%"
        >
          <el-table-column prop="paper_name" label="试卷名称" width="210" />
          <el-table-column prop="subject_name" label="学科名称" width="140" align="center" />
          <el-table-column prop="directory_name" label="目录名称" width="140" align="center" />
          <el-table-column prop="paper_type" label="试卷类型" align="center">
            <template #default="{row}">
              <span v-if="row.paper_type===2">真题卷</span>
              <span v-else>模拟卷</span>
            </template>
          </el-table-column>
          <el-table-column prop="show_state" label="试卷状态" align="center">
            <template #default="{row}">
              <el-switch
                v-model="row.show_state"
                :active-value="1"
                :inactive-value="2"
                @change="changeSwitch(row.id,row.show_state)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="tagname" label="分数情况" align="center">
            <template #default="{row}">
              <span>{{ row.pass_score+'/'+row.total_score }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="试卷难度" align="center">
            <template #default="{row}">
              <span v-if="row.difficulty===1">简单</span>
              <span v-else-if="row.difficulty===2">中等</span>
              <span v-else>较难</span>
            </template>
          </el-table-column>

          <el-table-column prop="create_name" label="创建人" align="center" />

          <el-table-column prop="created_at" label="创建时间" align="center">
            <template #default="{row}">
              <span>{{ new Date(row.created_at).getFullYear() }}</span>-<span>{{ (new Date(row.created_at).getMonth()+1)>10?(new Date(row.created_at).getMonth()+1):'0'+(new Date(row.created_at).getMonth()+1) }}</span>-<span>{{ new Date(row.created_at).getDate() }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="" label="操作" align="center" width="160">
            <template #default="{row}">
              <el-tooltip class="item" effect="dark" content="查看" placement="top">
                <el-button type="text" icon="el-icon-view" size="mini" @click="watch(3,row.id)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="修改" placement="top">
                <el-button type="text" icon="el-icon-edit" size="mini" @click="changePage(2,row.id)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button type="text" icon="el-icon-delete" size="mini" @click="deletePaper(row.id)" />
              </el-tooltip>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <!-- 分页区域 -->
      <div class="page">
        <el-row type="flex" justify="end">
          <el-pagination
            background
            :current-page="paramsData.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="paramsData.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>

      </div>
    </div>

    <!-- ---------------------------------创建和修改试卷页面 --------------------------------->
    <div v-else-if="keyNum===2">
      <!-- 工具条区域 -->
      <div class="tabbar" style=" border-bottom: 1px solid #eaedf1;padding-bottom:10px">
        <el-row type="flex" justify="space-between">
          <p style="font-weight:700;margin:0 10px;font-size:18px">新增试卷</p>
          <div>
            <el-button plain type="primary" size="mini" @click="changePage(1)">返回列表</el-button>
          </div>
        </el-row>
      </div>

      <!-- 内容区域 -->
      <el-form ref="addForm" :model="form" :rules="rulesForm">
        <el-row :gutter="24" style="width:1100px;">
          <el-col :span="13">
            <el-form-item label="试卷名称" prop="paper_name" label-width="80px">
              <el-input v-model.trim="form.paper_name" placeholder="请输入试卷名称" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="试卷包含题型" prop="quest_type" label-width="120px">

              <el-checkbox-group v-model="form.quest_type" @change="testType">
                <el-checkbox :label="1">单选题</el-checkbox>
                <el-checkbox :label="2">多选题</el-checkbox>
                <el-checkbox :label="3">判断题</el-checkbox>
                <el-checkbox :label="4">简答题</el-checkbox>

              </el-checkbox-group>

            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="24">

          <el-col :span="6">
            <el-form-item label="归属学科" prop="subject_id">
              <el-select v-model="form.subject_id" placeholder="请选择" @change="changeId">
                <el-option
                  v-for="item in selectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属目录" prop="directory_id">
              <el-select v-model="form.directory_id" placeholder="请选择">
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷状态">
              <el-radio-group v-model="form.show_state">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷状态">
              <el-radio-group v-model="form.paper_type" size="mini">
                <el-radio :label="1" size="mini">模拟卷</el-radio>
                <el-radio :label="2" size="mini">考试卷</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">

          <el-col :span="6">
            <el-form-item label="试卷总分" prop="total_score">
              <el-input v-model="form.total_score" clearable style="width:70%;">
                <template slot="append">
                  <span>分</span>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="及格分数" prop="pass_score">
              <el-input v-model="form.pass_score" clearable style="width:70%;">
                <template slot="append">
                  <span>分</span>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷难度" prop="difficulty">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option label="简单" :value="1" />
                <el-option label="中等" :value="2" />
                <el-option label="较难" :value="3" />

              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item label="选题信息" label-width="80px" prop="check_question_list">
          <el-table :data="form.check_question_list" border style="width: 100%">
            <template slot="empty">
              <p>请勾选试卷包含题型，从而生成选题模板</p>
            </template>
            <el-table-column prop="" label="题型" width="140" align="center">
              <template #default="{row}">
                <span>{{ row.type === 1 ? '单选题' : '' || row.type === 2 ? '多选题' : '' || row.type ===3 ? '判断题': '' || row.type === 4 ? '简答题' : '' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="选题信息">
              <template #default="{row}">
                <span>共
                  <el-input v-model="row.num" style="width:60px" size="small" @input="chooseNum = (+$event) !== chooseInfo[`selectList${row.type}`].length" />
                  题，每题
                  <el-input v-model="row.score" style="width:60px" size="small" />
                  分，已选题数： <span>{{ chooseInfo[`selectList${row.type}`].length }}</span> 题
                </span>
                <el-button size="small" type="success" @click="look(row.type)">看题</el-button>
                <el-button size="small" type="primary" @click="choose(row.type)">选题</el-button>
                <span v-if="chooseNum" style="color: #f56c6c">选题数量和试题数量不一致</span>
              </template>
            </el-table-column>

          </el-table>

        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="margin-left:70px" @click="createdPaper">立即创建</el-button>
          <el-button type="primary" plain @click="changePage(1)">取消</el-button>
        </el-form-item>
      </el-form>

    </div>

    <!-- ---------------------------------查看试卷页面 --------------------------------->
    <div v-else>
      <!-- 头部工具条区域 -->
      <div class="tabbar" style="border-bottom: 1px solid #eaedf1;padding-bottom:10px">
        <el-row type="flex" justify="space-between">
          <div>
            <b style="margin-right:10px">试卷名称:</b>
            <span>{{ watchList.paper_name }}</span>
          </div>

          <div>
            <el-button plain type="primary" size="mini" @click="changePage(1)">返回列表</el-button>
          </div>
        </el-row>
      </div>

      <el-row :gutter="20" style="border-bottom: 2px solid #eaedf1;padding-bottom:20px">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <b>归属学课：</b><span>{{ watchList.subject_name }}</span><br>
            <b>试卷难度：</b><span>{{ watchList.difficulty===1?'简单':''|| watchList.difficulty===2?'中等':''||watchList.difficulty===3?'较难':'' }}</span><br>
            <b>创建人：</b><span>{{ watchList.create_name }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <b>归属目录：</b><span>{{ watchList.directory_name }}</span><br>
            <b>试卷题型：</b><span>{{ watchList.quest_type }}</span><br>
            <b>创建时间：</b><span>{{ new Date(watchList.created_at).getFullYear() }}</span>-<span>{{ (new Date(watchList.created_at).getMonth()+1)>10?(new Date(watchList.created_at).getMonth()+1):'0'+(new Date(watchList.created_at).getMonth()+1) }}</span>-<span>{{ new Date(watchList.created_at).getDate() }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <b>试卷状态：</b> <el-button type="success" plain size="mini">{{ watchList.show_state===1?'启用':'禁用' }}</el-button> <br>
            <b>试卷总分：</b><span>{{ watchList.total_score }}分</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <b>试卷类型：</b><span>{{ watchList.paper_type===1?'模拟卷':'真题卷' }}</span><br>
            <b>及格分数：</b><span>{{ watchList.pass_score }}分</span>
          </div>
        </el-col>
      </el-row>

      <div style="margin-top:20px;">
        <p style="margin-bottom:20px;">选题信息</p>
        <el-table :data="watchList.check_question_list" border style="width: 100%">

          <el-table-column prop="" label="题型" width="140" align="center">
            <template #default="{row}">
              <span>{{ row.type === 1 ? '单选题' : '' || row.type === 2 ? '多选题' : '' || row.type ===3 ? '判断题': '' || row.type === 4 ? '简答题' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="选题信息">
            <template #default="{row}">
              <span>共
                <el-input v-model="row.num" style="width:60px" size="small" @input="chooseNum = (+$event) !== chooseInfo[`selectList${row.type}`].length" />
                题，每题
                <el-input v-model="row.score" style="width:60px" size="small" />
                分，已选题数： <span>{{ chooseInfo[`selectList${row.type}`].length }}</span> 题
              </span>
              <el-button size="small" type="success" @click="see(row.type)">看题</el-button>

            </template>
          </el-table-column>

        </el-table>
      </div>

    </div>

    <!-- ---------------------------------选择试题弹出框，表单区域 ------------------------------------->
    <div>

      <el-dialog
        title="选择试题"
        :visible.sync="dialogVisible"
        width="70%"
        @close="handleClose"
      >

        <el-form>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item>
                <el-select v-model="testData.subject_id" clearable placeholder="请选择学科" @change="changeId">

                  <el-option
                    v-for="item in selectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item>
                <el-select v-model="testData.directory_id" clearable placeholder="请选择目录" @change="changeDirectory">
                  <el-option
                    v-for="item in directoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="6">

              <el-form-item>
                <el-select v-model="testData.tag_id" clearable placeholder="请选择标签">
                  <el-option
                    v-for="item in tagList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-select v-model="testData.quest_type" disabled placeholder="请选择题型">
                  <el-option label="单选题" :value="1" />
                  <el-option label="多选题" :value="2" />
                  <el-option label="判断题" :value="3" />
                  <el-option label="简答题" :value="4" />
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item>
                <el-select v-model="testData.check_state" disabled placeholder="请选择">
                  <el-option label="审核已通过" :value="2" />
                  <el-option label="审核未通过" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item>
                <el-select v-model="testData.show_state" disabled placeholder="请选择">
                  <el-option label="上架" :value="1" />
                  <el-option label="下架" :value="2" />
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="6">

              <el-form-item>
                <el-input placeholder="请输入创建者" />
              </el-form-item>

            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-select v-model="testData.difficulty" placeholder="请选择难度">
                  <el-option label="简单" :value="1" />
                  <el-option label="中等" :value="2" />
                  <el-option label="较难" :value="3" />
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item>
                <el-select v-model="testData.is_true_question" placeholder="请选择是否真题">
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item>
                <el-date-picker
                  v-model="testData.create_time"
                  style="width:250px"
                  type="daterange"
                  value-format="timestamp"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>

            </el-col>
            <el-col :span="12">

              <el-form-item style="margin-left:300px">
                <el-button type="primary" size="small" @click="searchTest">查询</el-button>
                <el-button size="small" @click="resetTest">重置</el-button>
                <el-button v-if="flag" size="small" type="warning" icon="el-icon-folder-remove" plain @click="flag = !flag" />
                <el-button v-else size="small" type="warning" icon="el-icon-folder-add" plain @click="flag = !flag" />
              </el-form-item>

            </el-col>

          </el-row>
        </el-form>
        <el-form>
          <el-table ref="multipleTable" :data="questData" border style="width: 100%" @selection-change="selected">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="date" label="试题信息">
              <template #default="{row}">
                <el-row v-if="flag">
                  <el-col :span="2">
                    <b>ID: </b>
                    <span>{{ row.id }}</span>
                  </el-col>
                  <el-col :span="22">
                    <b>题干信息：</b>
                    <el-link type="primary" @click="preview(row)">
                      <span v-html="row.question" />
                    </el-link>
                  </el-col>
                  <el-col :span="4">
                    <b>归属学科：</b>
                    <span>{{ row.subject_name }}</span>
                  </el-col>
                  <el-col :span="4">
                    <b>归属科目: </b>
                    <span>{{ row.directory_name }}</span>
                  </el-col>
                  <el-col :span="7">
                    <b>标签信息: </b>
                    <span>{{ row.tag_info.join(',') }}</span>
                  </el-col>
                  <el-col :span="4">
                    <b>发布状态: </b>
                    <span class="green">{{ row.show_state === 1 ? '上架': '未上架' }}</span>
                  </el-col>
                  <el-col :span="4">
                    <b>发布时间: </b>
                    <span>{{ row.created_at }}</span>
                  </el-col>
                </el-row>

                <el-row v-else>
                  <el-col :span="2">
                    <b>ID: </b>
                    <span>{{ row.id }}</span>
                  </el-col>
                  <el-col :span="22">
                    <b>题干信息：</b>
                    <el-link type="primary" @click="preview(row)">
                      <span v-html="row.question" />
                    </el-link>
                  </el-col>
                  <el-col :span="10">
                    <b>试题编号:</b>
                    <span>{{ row.quest_num }}</span>
                  </el-col>
                  <el-col :span="4">
                    <b>试题类型:</b>
                    <span>{{ row.quest_type === 1 ? '单选题' : '' || row.quest_type === 2 ? '多选题' : '' || row.quest_type ===3 ? '判断题': '' || row.quest_type === 4 ? '简答题' : '' }}</span>
                  </el-col>
                  <el-col :span="5">
                    <b>归属学科:</b>
                    <span>{{ row.subject_name }}</span>
                  </el-col>
                  <el-col :span="5">
                    <b>归属目录:</b>
                    <span>{{ row.directory_name }}</span>
                  </el-col>
                  <el-col :span="10">
                    <b>标签信息</b>
                    <span>{{ row.tag_info.join(',') }}</span>
                  </el-col>
                  <el-col :span="4">
                    <b>发布状态:</b>
                    <span class="green">{{ row.show_state === 1 ? '上架': '未上架' }}</span>
                  </el-col>
                  <el-col :span="5">
                    <b>审核人</b>
                    <span>暂无</span>
                  </el-col>
                  <el-col :span="5">
                    <b>审核状态</b>
                    <span class="green">{{ row.check_state === 1 ? '未通过' : '通过' }}</span>
                  </el-col>
                  <el-col :span="10">
                    <b>审核意见: </b>
                    <span>{{ row.check_remarks }}</span>
                  </el-col>
                  <el-col :span="4">
                    <b>创建人: </b>
                    <span>{{ row.create_name }}</span>
                  </el-col>
                  <el-col :span="5">
                    <b>难度: </b>
                    <span>{{ row.difficulty === 1 ? '简单' : '' || row.difficulty === 2 ? '中等' : '' || row.difficulty === 3 ? '较难' : '' }}</span>
                  </el-col>
                  <el-col :span="5">
                    <b>发布时间: </b>
                    <span>{{ row.created_at }}</span>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button type="primary" size="small" style="margin-right:500px" @click="sure">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- ---------------------------------预览试题弹出框区域 ------------------------------------->
    <div>
      <el-dialog
        title="试题预览"
        :visible.sync="previewDialog"
        width="65%"
      >
        <el-divider>基本数据</el-divider>
        <el-row>
          <el-col :span="10">
            <b>试题编号:</b>
            <span>{{ previewDate.quest_num }}</span>
          </el-col>
          <el-col :span="4">
            <b>试题类型:</b>
            <span>{{ previewDate.quest_type=== 1 ? '单选题' : "" || previewDate.quest_type=== 2 ? '多选题' : "" || previewDate.quest_type=== 3 ? '判断题' : "" || previewDate.quest_type=== 4 ? '简答题' : "" }}</span>
          </el-col>
          <el-col :span="5">
            <b>归属学科:</b>
            <span>{{ previewDate.subject_name }}</span>
          </el-col>
          <el-col :span="5">
            <b>归属目录:</b>
            <span>{{ previewDate.directory_name }}</span>
          </el-col>

          <el-col :span="10">
            <b>标签信息:</b>
            <span>{{ previewDate.tag_info?.join(',') }}</span>
          </el-col>
          <el-col :span="4">
            <b>发布状态:</b>
            <span class="green">{{ previewDate.show_state === 1 ? '上架' : '未上架' }}</span>
          </el-col>
          <el-col :span="5">
            <b>审核人:</b>
            <span>暂无</span>
          </el-col>
          <el-col :span="5">
            <b>审核状态:</b>
            <span class="green">{{ previewDate.check_state === 1 ? '未通过' : '通过' }}</span>
          </el-col>

          <el-col :span="10">
            <b>审核意见:</b>
            <span>{{ previewDate.check_remarks }}</span>
          </el-col>
          <el-col :span="4">
            <b>创建人:</b>
            <span>{{ previewDate.create_name }}</span>
          </el-col>
          <el-col :span="5">
            <b>难度系数:</b>
            <span>{{ previewDate.difficulty === 1 ? '简单' : '' || previewDate.difficulty === 2 ? '中等' : '' || previewDate.difficulty === 3 ? '较难' : '' }}</span>
          </el-col>
          <el-col :span="5">
            <b>发布时间:</b>
            <span>{{ previewDate.created_at }}</span>
          </el-col>
        </el-row>

        <el-divider>试题信息</el-divider>
        <el-row>
          <el-col :span="24">
            <b>题干信息:</b>
            <el-link :underline="false">
              <span v-html="previewDate.question" />
            </el-link>
          </el-col>
          <el-col v-if="previewDate?.quest_options" :span="24">
            <b>选项信息:</b>
            <el-checkbox-group :value="checkList">
              <el-checkbox v-for="(item,index) in previewDate.quest_options" :key="index" :label="item.code" :value="item.is_true">{{ item.code }}{{ item.content }}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>

        <el-divider>答案信息</el-divider>
        <el-row>
          <el-col :span="24">
            <b>正确答案：</b>
            <span style="color: #409eff">{{ previewDate.quest_answer }}</span>
          </el-col>
          <el-col :span="24">
            <b>答案解析：</b>
            <span v-html="previewDate.quest_remark || '暂无解析'" />
          </el-col>
        </el-row>
      </el-dialog>
    </div>

    <!------------------------------------ 查看试题对话框 ---------------------------------------->
    <div>
      <el-dialog
        title="查阅试题"
        :visible.sync="lookDialog"
        width="74%"
      >
        <el-table
          :data="tableDataLook"
          border
          style="width: 100%"
        >
          <el-table-column
            prop=""
            label="试题内容"
          >
            <template #default="{row}">
              <el-row>
                <el-col :span="2">
                  <b>ID:</b>
                  <span>{{ row.id }}</span>
                </el-col>
                <el-col :span="22">
                  <b>题干信息:</b>
                  <el-link type="primary" @click="preview(row)">
                    <span v-html="row.question" />
                  </el-link>
                </el-col>
                <el-col :span="4">
                  <b>归属学科:</b>
                  <span>{{ row.subject_name }}</span>
                </el-col>
                <el-col :span="4">
                  <b>归属目录:</b>
                  <span>{{ row.directory_name }}</span>
                </el-col>
                <el-col :span="7">
                  <b>标签信息:</b>
                  <span>{{ row.tag_info.join(',') }}</span>
                </el-col>
                <el-col :span="4">
                  <b>发布状态: </b>
                  <span class="green"> {{ row.show_state === 1 ? '上架': '未上架' }}</span>
                </el-col>
                <el-col :span="4">
                  <b>发布时间: </b>
                  <span>{{ row.created_at }}</span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="操作"
            width="100"
            align="center"
          >
            <template #default="{row}">
              <el-button type="danger" icon="el-icon-delete" circle @click="del(row)" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <!------------------------------------ 页面3的查看试题对话框 ---------------------------------------->
    <div>
      <el-dialog
        title="查阅试题"
        :visible.sync="seeDialog"
        width="74%"
      >
        <el-table
          :data="tableDataSee"
          border
          style="width: 100%"
        >
          <el-table-column
            prop=""
            label="试题内容"
          >
            <template #default="{row}">
              <el-row>
                <el-col :span="2">
                  <b>ID:</b>
                  <span>{{ row.id }}</span>
                </el-col>
                <el-col :span="22">
                  <b>题干信息:</b>
                  <el-link type="primary" @click="preview(row)">
                    <span v-html="row.question" />
                  </el-link>
                </el-col>
                <el-col :span="4">
                  <b>归属学科:</b>
                  <span>{{ row.subject_name }}</span>
                </el-col>
                <el-col :span="4">
                  <b>归属目录:</b>
                  <span>{{ row.directory_name }}</span>
                </el-col>
                <el-col :span="7">
                  <b>标签信息:</b>
                  <span>{{ row.tag_info.join(',') }}</span>
                </el-col>
                <el-col :span="4">
                  <b>发布状态: </b>
                  <span class="green"> {{ row.show_state === 1 ? '上架': '未上架' }}</span>
                </el-col>
                <el-col :span="4">
                  <b>发布时间: </b>
                  <span>{{ row.created_at }}</span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>

        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getPaper, getsubTree, chooseQuest, addNewPaper, getDetailPaper, updatePaper, delPaper, changeBtn } from '@/api/exam/paper'

export default {

  data() {
    return {
      dialogVisible: false, // 选题对话框
      keyNum: 1, // 控制开启页面的开关数字(1是默认主页面，2是新增与修改页面，3是查看)

      // -------------------------------页面2创建试卷(校验未给)----------------------------
      form: {
        check_question_list: [],
        difficulty: '',
        directory_id: '',
        paper_name: '',
        paper_type: 1,
        pass_score: 60,
        quest_type: [],
        question_list: [],
        show_state: 1,
        subject_id: '',
        total_score: 100
      },
      rulesForm: {
        paper_name: [
          { required: true, message: '请输入试卷名称', trigger: 'blur' }
        ],
        quest_type: [
          { required: true, message: '请输入选择', trigger: 'change' }
        ],
        subject_id: [
          { required: true, message: '请输入选择', trigger: 'change' }
        ],
        directory_id: [
          { required: true, message: '请输入选择', trigger: 'change' }
        ],
        total_score: [
          { required: true, message: '请输入输入', trigger: 'blur' }
        ],
        pass_score: [
          { required: true, message: '请输入输入', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请输入选择', trigger: 'change' }
        ],
        check_question_list: [
          { required: true, message: '请输入选择', trigger: 'change' }
        ]
      },
      selectList: '', // 归属学科下拉框数据
      directoryList: [], // 归属目录下拉框数据
      tagList: [], // 三级下拉框
      list: [], // 渲染主页面数据

      // ---------------------------------主页面请求参数数据------------------------------------
      paramsData: {
        page: 1, // 页码值
        limit: 10, // 每页显示条数,
        subject_id: null,
        directory_id: null,
        paper_name: '',
        difficulty: null,
        show_state: null,
        paper_type: null,
        create_name: '',
        create_time: null
      },
      total: 0,

      // ----------------------------------试题弹出框请求数据------------------------------------
      testData: {
        page: 1,
        limit: 10,
        subject_id: null,
        directory_id: null,
        tag_id: null,
        difficulty: null,
        quest_type: 1,
        is_true_question: null,
        show_state: 1,
        check_state: 2,
        create_name: '',
        create_time: ''
      },
      questData: [], // 请求到的试题数据
      chooseInfo: {
        selectList1: [], // 存放选中的单选题
        selectList2: [], // 存放选中的多选题
        selectList3: [], // 存放选中的判断题
        selectList4: [] // 存放选中的简答题
      },
      previewDialog: false, // 控制试题预览对话框的显示隐藏
      lookDialog: false, // 查看试题对话框
      seeDialog: false, // 页面3查看试题对话框
      previewDate: {}, // 试题预览页面数据
      tableDataSee: [], // 页面3查看试题对话框的表格数据
      tableDataLook: [], // 查看试题对话框的表格数据
      chooseNum: false, // 控制判断试题数量和输入数量是有一致的显示隐藏
      checkList: [], // 获取选中的复选框
      flag: true,
      idList: [],
      watchList: {}
    }
  },
  created() {
    this.initData()
  },

  methods: {
    // 获取主页面渲染数据
    async initData() {
      this.selectList = await getsubTree() // 下拉框数据(树状结构)
      // console.log(this.selectList);

      const res = await getPaper(this.paramsData) // 主页面数据
      // console.log(res)
      this.list = res.list
      this.total = res.total
    },
    // 子集下拉框数据
    changeId(val) {
    // console.log(val);
      this.directoryList = this.selectList.find(item => item.id === val).children
      // console.log(this.directoryList)
    },
    // 题型复选框
    testType(val) {
    // console.log(val);
      this.form.check_question_list = val.map(item => {
        if (item === 1) {
          return { type: item, name: '单选题', num: 0, score: 0, check_list: [] }
        }
        if (item === 2) {
          return { type: item, name: '多选题', num: 0, score: 0, check_list: [] }
        }
        if (item === 3) {
          return { type: item, name: '判断题', num: 0, score: 0, check_list: [] }
        }
        if (item === 4) {
          return { type: item, name: '简答题', num: 0, score: 0, check_list: [] }
        }
      })
      // console.log(this.form.check_question_list);
    },
    // 孙子集下拉框
    changeDirectory(val) {
      this.tagList = this.directoryList.find(item => item.id === val).children
    },
    // --------------------------------- 页面2看题--------------------------------
    async look(val) {
      // console.log(val)
      if (!this.chooseInfo[`selectList${val}`].length) {
        return this.$message.warning('还未选题，没有试题信息')
      }
      this.tableDataLook = this.chooseInfo[`selectList${val}`]
      // console.log(this.tableDataLook)
      this.lookDialog = true
    },
    // --------------------------------- 页面3看题--------------------------------
    async see(val) {
      // console.log(val)
      if (!this.chooseInfo[`selectList${val}`].length) {
        return this.$message.warning('还未选题，没有试题信息')
      }
      this.tableDataSee = this.chooseInfo[`selectList${val}`]
      // console.log(this.tableDataLook)
      this.seeDialog = true
    },
    // 主页表格区域的删除试题
    deletePaper(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPaper(id)
        this.$message.success('删除成功!')
        this.initData()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    //  预览试题里的删除试题
    del(row) {
      this.chooseInfo[`selectList${row.quest_type}`] = this.chooseInfo[`selectList${row.quest_type}`].filter(ele => ele.id !== row.id)
      this.tableDataLook = this.tableDataLook.filter(ele => ele.id !== row.id)
    },
    // 获取试题
    async getTestList() {
      const res = await chooseQuest(this.testData)
      // console.log(res)
      this.questData = res.list
    },
    // ----------------------------------选题，打开弹出框--------------------------
    async choose(val) {
    // console.log(val);
      this.dialogVisible = true
      this.testData.quest_type = val
      await this.getTestList()
      // 等DOM加载完在去通过$refs去获取表格对象
      this.$nextTick(() => {
      //  打开时显示之前选中的选项
        this.questData.forEach(row => {
          this.chooseInfo[`selectList${val}`].forEach(ele => {
            if (ele.id === row.id) {
              this.$refs.multipleTable.toggleRowSelection(row, true)
            }
          })
        })
      })
    },
    // 查询考试题
    async searchTest() {
      this.testData.page = 1
      if (this.testData.create_time) {
        this.testData.create_time[0] = +new Date(new Date(this.testData.create_time[0]).toLocaleDateString())
        this.testData.create_time[1] = +new Date(new Date(this.testData.create_time[1]).toLocaleDateString())
        this.testData.create_time = this.testData.create_time.join(',')
      }
      this.getTestList()
    },
    // 重置查询
    async resetTest() {
      this.testData = {
        page: 1,
        limit: 10,
        subject_id: null,
        directory_id: null,
        tag_id: null,
        difficulty: null,
        quest_type: this.testData.quest_type,
        is_true_question: null,
        show_state: 1,
        check_state: 2,
        create_name: '',
        create_time: ''
      }
      this.getTestList()
    },
    // -----------------------------------选题，关闭弹出框----------------------------
    handleClose() {
      this.testData = {
        page: 1,
        limit: 10,
        subject_id: null,
        directory_id: null,
        tag_id: null,
        difficulty: null,
        quest_type: 1,
        is_true_question: null,
        show_state: 1,
        check_state: 2,
        create_name: '',
        create_time: ''
      }
      this.dialogVisible = false
    },

    // 获取试题预览数据,从选题按钮进入
    preview(row) {
      this.previewDate = row
      // 判断this.previewDate.quest_options是否是数组，如果不是就使用JSON.parse进行反序列化
      if (typeof this.previewDate.quest_options !== 'object') {
        this.previewDate.quest_options = JSON.parse(this.previewDate.quest_options)
      }
      this.checkList = this.previewDate.quest_options.map(ele => {
        if (ele.is_true) {
          return ele.code
        }
        return false
      })
      this.previewDialog = true
    },

    // 选中的题
    selected(val) {
      // 形参接收的是选中的对象
      // console.log(val)
      // 将获取的选中的临时存在vue实例的slec变量上

      console.log(val)
      this.idList = val.map(item => item.id)
      console.log(this.idList)
      this.slec = val
    },
    // 点击确定选题
    sure() {
      // 将选中的题目存储到对应的数组中
      this.chooseInfo[`selectList${this.testData.quest_type}`] = this.slec
      // console.log(this.selectList)
      console.log(this.chooseInfo)
      if (this.idList) {
        console.log(this.form.question_list)
        this.form.question_list.push(...this.idList)
        console.log(this.form.question_list)
      }
      this.dialogVisible = false
    },
    // 创建试卷
    createdPaper() {
      // 兜底校验
      this.$refs.addForm.validate(async(isOk) => {
        const sum = this.form.check_question_list.reduce((prev, item) => prev + item.num * item.score, 0)
        if (isOk) {
          if (sum !== +this.form.total_score) {
            return this.$message.warning('选题总分数和试卷总分不一致')
          }
          // 新增
          if (!this.form.id) {
            console.log(this.form.question_list)
            await addNewPaper(this.form)
            // console.log(res)
            this.$message.success('创建试卷成功')
            this.keyNum = 1
            this.initData()
          } else {
            await updatePaper(this.form)
            // console.log(res)
            this.$message.success('编辑试卷成功')
            this.keyNum = 1
            this.initData()
          }
        }
      })
    },

    // 搜索
    search() {
      this.paramsData.page = 1
      if (this.paramsData.create_time) {
        this.paramsData.create_time = this.paramsData.create_time.join(',')
      }
      this.initData()
    },
    // 重置
    reset() {
      this.paramsData = {
        page: 1, // 页码值
        limit: 10, // 每页显示条数,
        subject_id: null,
        directory_id: null,
        paper_name: '',
        difficulty: null,
        show_state: null,
        paper_type: null,
        create_name: '',
        create_time: null
      }
      this.initData()
    },
    // 切换分页的每页显示条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.paramsData.limit = val
      this.paramsData.page = 1
      this.initData()
    },
    // 切换分页的当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.paramsData.page = val

      this.initData()
    },
    // 切换主页面
    async  changePage(value, id) {
      this.keyNum = value
      this.form = {
        check_question_list: [],
        difficulty: '',
        directory_id: '',
        paper_name: '',
        paper_type: 1,
        pass_score: 60,
        quest_type: [],
        question_list: [],
        show_state: 1,
        subject_id: '',
        total_score: 100
      }
      this.chooseInfo = {
        selectList1: [], // 存放选中的单选题
        selectList2: [], // 存放选中的多选题
        selectList3: [], // 存放选中的判断题
        selectList4: [] // 存放选中的简答题
      }
      console.log(id)
      if (id) {
        const res = await getDetailPaper(id)
        console.log(res)
        this.form = res

        this.form.directory_id = ''
        if (typeof this.form.check_question_list !== 'object') {
          this.form.check_question_list = JSON.parse(this.form.check_question_list)
        }
        if (typeof this.form.quest_type !== 'object') {
          this.form.quest_type = JSON.parse(this.form.quest_type)
        }
        this.form.quest_type.forEach(ele => {
          this.chooseInfo[`selectList${ele}`] = this.form.question_data.filter(item => item.quest_type === ele)
        })
        console.log(this.form.question_list.split(','))
        this.form.question_list = this.form.question_list.split(',')
      }
    },
    async watch(val, id) {
      this.keyNum = val
      this.watchList = await getDetailPaper(id)
      // console.log(this.watchList)
      this.watchList.check_question_list = JSON.parse(this.watchList.check_question_list)
      console.log(this.watchList.quest_type)
      this.WQT = this.watchList.quest_type
      this.WQT = JSON.parse(this.WQT)
      this.WQT.forEach(ele => {
        this.chooseInfo[`selectList${ele}`] = this.watchList.question_data.filter(item => item.quest_type === ele)
      })

      this.watchList.quest_type = this.transformStatusArray(this.watchList.quest_type).join(',')
      this.watchList.question_list = this.watchList.question_list.split(',')
    },

    // 处理题型显示
    transformStatusArray(statusArray) {
      const statusDict = {
        1: '单选题',
        2: '多选题',
        3: '判断题',
        4: '简答题'
      }
      const translatedArray = []
      for (let i = 0; i < statusArray.length; i++) {
        const status = statusArray[i]
        if (status in statusDict) {
          translatedArray.push(statusDict[status])
        }
      }
      return translatedArray
    },
    // 主页面表格区域开关按钮
    async changeSwitch(id, val) {
      console.log(id, val)
      await changeBtn(id, val)
      this.$message.success('切换成功')
    }

  }
}
</script>
<style lang="scss" scoped>
.page-box{
  width: 100%;
  background-color: #fff;
  padding: 20px;
  .tabbar{

    margin-bottom: 20px;

  }
 .tabel{
  padding-top:10px ;

 }
 .page{
  margin-top: 20px;
 }

.el-form{
 .el-form-item{
 margin-right: 0;
 }
}
:deep(p){
 margin: 0 ;
 padding: 0;
}
.green {
 display: inline-block;
 height: 24px;
 padding: 0 8px;
line-height: 22px;
 background-color: #f0f9eb;
 border:1px solid #e1f3d8;
 color: #67c23a;
 border-radius: 4px
}
b {
color: #aaa;
 font-weight: 400;
}
.el-col{
 line-height: 30px;
}

}
</style>
